@extends('home.layout.index')
@section('header')
    <div class='nav-ul-view'>
  <ul class='menu g'>
    <li class='gi
        is-active
        '>
      <a class='m-item' href='/home'>
        <span>首页</span>
      </a>
    </li>
    <li class='gi
        '>
      <a class='m-item' href='/home/chanpin'>
        <span>产品</span>
      </a>
    </li>
                                <li class='gi'>
      <a class='m-item' id='storeLink' href='/home/shop' data-hd-url='http://hd.oppo.com/act/2016/1001/index.html'>
        <span>商城</span>
              </a>
          </li>
    <li class='gi
        '>
      <a class='m-item' href='/home/notice'>
        <span>公告</span>
      </a>
    </li>
    <li class='gi
        '>
      <a class='m-item' href='/home/service'>
        <span>服务</span>
              </a>
    </li>
   
  </ul>
  </div>
@endsection
@section('lunbotu')
<!--首页轮播图部分-->
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
  <style>
    *{
      margin:0;
      padding:0;
    }
    ul,li{
      list-style: none;
    }
    .box{
      width:100%;
      height:446px;
      
      position:relative;
      margin:0 auto;
    }

    .images li{
      position: absolute;
      left:0;
      top:0;
      display: none;
    }

    .images li:nth-child(1){
      display: block;
    }

    .nums{
      position: relative;
      left:650px;
      top:380px;
    }

    .nums li{
      width:20px;
      height:20px;
      background: #333;
      border-radius: 20px;
      color:#fff;
      text-align:center;
      line-height: 20px;
      float:left;
      margin-right:6px;
      font-size:12px;
      cursor:pointer;
    }

    .nums .click{
      background: green;
    }

    .but{
      width:20px;
      height:40px;
      border:1px solid #fff;
      color:#fff;
      position: absolute;
      text-align: center;
      line-height: 40px;
      top:170px;
      font-size:18px;
      font-weight:bold;
      cursor:pointer;
      display: none;
    }

    .prev{
      left:0;

    }

    .next{
      right:0;
    }
  </style>
</head>
<script src="/jquery-1.8.3.min.js"></script>
<script>
  $(function(){
    // 定义标识符控制 显示隐藏
    var k = null;
    var time = null;
    Run();
    // 定时器
    function Run(){
      if(time == null){
        time = setInterval(function(){
          k++;
          if(k > 3){ k = 0}
          show_(k);
        },2000)
      }
    }
    // 控制 图片 和 li 的样式和显示方式
    function show_(k){
      $('.images li').hide();
      $('.images li').eq(k).show();
      // console.log(k);
      $('.nums li').removeClass();
      $('.nums li').eq(k).addClass('click');
    }
    // 清除定时器
    function clear(){
      clearInterval(time);
      time = null;
    }
    // 给 li标签 绑定移移出事件
    $('.nums li').mouseover(function(){
      clear()
      k = $(this).index();
      show_(k);
    }).mouseout(function(){
      Run();
    })
    // 通过控制k  控制图片和li标签的显示
    $('.prev').click(function(){
      clear()
      k--; if(k<0){ k = 2} 
      show_(k);
      console.log(k)
    }).mouseover(function(){
      clear();
    }).mouseout(function(){
      Run();
    })

    $('.next').click(function(){
      clear()
      k++; if(k>2){ k = 0} 
      show_(k);
      console.log(k)
    }).mouseover(function(){
      clear();
    }).mouseout(function(){
      Run();
    })
    
    $('div').mouseover(function(){
      clear();
      $('.but').css('display','block');
    }).mouseout(function(){
      Run();
      $('.but').css('display','none');
    })
  })
</script>
<body>
  
  <div class="box">
    <ul class="images">
    @foreach($data as $k=>$v)
      <li><a href="home/wupin?id={{$v['id']}}"><img src="/upload/pic/{{$v['pic']}}" alt="" onclick="/" style="cursor:pointer" title="{{$v['name']}}"></a></li>
 @endforeach
    </ul>

    <ul class="nums">
      <li class="click">1</li>
      <li>2</li>
      <li>3</li>
    
    </ul>

    <div class="but prev"><</div>
    <div class="but next">></div>
  </div>
</body>


@endsection

@section('content')
  

  <main class="main-content">
  
    <section class="brick-feature">
      <div class="g g-wrapper-s">
          <div class="gi lap-one-third">
        <div class='feature-product'>
  <a href='{{$photo0['url']}}'>
    <img alt='OPPO开学季' title="{{$photo0['title']}}}" class='feature-product-image' src='/upload/photo/{{$photo0['pic']}}'>
    <div class='feature-product-content'>
      <h2 class='feature-product-heading'></h2>
      <p class='feature-product-description'>
        <strong></strong>
      </p>
    </div>
  </a>
</div>
      </div>
          <div class="gi lap-one-third">
        <div class='feature-product'>
  <a href='{{$photo1['url']}}'>
    <img alt='情人节大作战赢R9s' title="{{$photo1['title']}}}" class='feature-product-image' src='/upload/photo/{{$photo1['pic']}}'>
    <div class='feature-product-content'>
      <h2 class='feature-product-heading'></h2>
      <p class='feature-product-description'>
        <strong></strong>
      </p>
    </div>
  </a>
</div>
      </div>
          <div class="gi lap-one-third">
        <div class='feature-product'>
 <a href='{{$photo2['url']}}'>
    <img alt='R9s 黑色版' title="{{$photo2['title']}}}" class='feature-product-image' src='/upload/photo/{{$photo2['pic']}}'>
    <div class='feature-product-content'>
      <h2 class='feature-product-heading'></h2>
      <p class='feature-product-description'>
        <strong></strong>
      </p>
    </div>
  </a>
</div>
      </div>
      </div>
    </section>
              </main>

@endsection